<template>
    <div class="classic-demo">
        <div class="author-demo">
            <div>作者：陈炼，张璐奕</div>
            <div>日期：2017/11/02</div>
        </div>
        <h1>整页新增头部</h1>
        <div class="zlst-classic-title-basic clearfix">
            <i class="iconfont icon-daohuo"></i>
            <div class="title-basic-text">
                <span class="title-basic-tiny">预报编号：CG20170901001</span>
                <em class="margin-right-25">采购订单：CG20170901001</em> <em>合同号：20170824655485</em>
            </div>
        </div>
        <pre style="background-color: #ececec;">
            <code class="html" v-text="htmlCode">
            </code>
        </pre>
        <h1> 右侧详情头部（按钮）</h1>
          <div class="zlst-classic-title-detail clearfix">
            <i class="iconfont icon-daohuo"></i>
            <h3>调度任务：DD201711060001 (调拨计划:DB201711060001)</h3>
            <p>调度员：李逍遥 调度时间：1998-07-01</p>
            <div class="button">
                <z-button type="ensure" shape="rect">按钮1</z-button>
                <z-button type="ensure" shape="rect">按钮2</z-button>
            </div>

          </div>
        <pre style="background-color: #ececec;">
            <code class="html" v-text="htmlCode2">
            </code>
        </pre>
        <h1> 右侧详情头部(关闭图标）</h1>
          <div class="zlst-classic-title-close clearfix">
            <i class="iconfont icon-daohuo"></i>
            <h3>调度任务：DD201711060001 (调拨计划:DB201711060001)</h3>
            <p>调度员：李逍遥 调度时间：1998-07-01</p>
            <div class="close-icon">
                <Icon type="close-round" :size="20" style="cursor: pointer;"></Icon>
            </div>
          </div>
        <pre style="background-color: #ececec;">
            <code class="html" v-text="htmlCode3">
            </code>
        </pre>
    </div>
</template>

<script>
    import hljs from 'highlight.js'
    export default {
        data () {
            return {
                htmlCode:
                '        <div class="zlst-classic-title-basic clearfix">\n' +
                '            <i class="iconfont icon-daohuo"></i>\n' +
                '            <div class="title-basic-text">\n' +
                '                <span class="title-basic-gray">预报编号：CG20170901001</span>\n' +
                '                <em class="margin-right-25">采购订单：CG20170901001</em> <em>合同号：20170824655485</em>\n' +
                '            </div>\n' +
                '        </div>',
                htmlCode2:
                '        <div class="zlst-classic-title-detail clearfix">\n' +
                '            <i class="iconfont icon-daohuo"></i>\n' +
                '            <h3>调度任务：DD201711060001 (调拨计划:DB201711060001)</h3>\n' +
                '            <p>调度员：李逍遥 调度时间：1998-07-01</p>\n' +
                '            <div class="button">\n' +
                '                <z-button type="ensure" shape="rect">按钮1</z-button>\n' +
                '                <z-button type="ensure" shape="rect">按钮2</z-button>\n' +
                '            </div>\n' +
                '        </div>',
                htmlCode3:
                '        <div class="zlst-classic-title-close clearfix">\n' +
                '            <i class="iconfont icon-daohuo"></i>\n' +
                '            <h3>调度任务：DD201711060001 (调拨计划:DB201711060001)</h3>\n' +
                '            <p>调度员：李逍遥 调度时间：1998-07-01</p>\n' +
                '            <div class="close-icon">\n' +
                '                <Icon type="close-round" :size="20" style="cursor: pointer;"></Icon>\n' +
                '            </div>\n' +
                '        </div>',
            }
        },

        // 组件被挂载的时候执行的方法
        mounted: function () {
            window.setTimeout(function () {
                $('.classic-demo pre code').each(function(i, block) {
                    hljs.highlightBlock(block);
                });
            }, 0);
        }
    }
</script>
